<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <!-- <script>
      document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
      ':35729/livereload.js?snipver=1"></' + 'script>')
    </script>  -->

    <script src="livereload-setup.js"></script>

    <link rel="shortcut icon" href="images/favicon.png" />

    <link rel="stylesheet" href="style.css" />

    <script>
      var $ = function( sel ){ return document.querySelector(sel); };
      var $$ = function( sel ){ return document.querySelectorAll(sel); };

      // patches for IE:

      if( NodeList.prototype.forEach == null ){
        NodeList.prototype.forEach = function(fn){
          var l = this.length;
          var i, el;

          for(i = 0; i < l; i++){
            el = this[i];

            fn(el, i, this);
          }
        };
      }
    </script>


    <script src="FileSaver.js"></script>
    <script src="../build/cytoscape.umd.js"></script>

    <title>cytoscape.js debug page</title>
  </head>

  <body>
      <div id="cytoscape"></div>
      <div id="bb"></div>

      <!-- <div id="overlay-tester" style="position: absolute; left: 0; top: 0; width: 300px; height: 300px; background: rgba(255, 0, 0, 0.5);"></div> -->

<!--
      <div>Dummy canvas for cy.renderTo():</div>

      <canvas style="border: 1px solid red;" width="600" height="600" id="dummy-canvas"></canvas>
-->

      <div id="console"></div>

      <div id="commands-show-area">
        <button id="show-commands">+</button>
      </div>

      <div id="commands">

        <button id="hide-commands">-</button>

        <h2>Testing</h2>
        <select id="test-type-select">
        </select>

        <h2>View</h2>
        <button id="zoom-pan-button">No zoom & no pan</button>
        <button id="fit-button">View to fit</button> <br />

        <button id="center-selected-button">Center on selected</button>
        <button id="fit-selected-button">Fit to selected</button><br />

        Panning:
        <button id="enable-panning">on</button>
        <button id="disable-panning">off</button>
        User:
        <button id="enable-user-panning">on</button>
        <button id="disable-user-panning">off</button><br />

        Zooming:
        <button id="enable-zooming">on</button>
        <button id="disable-zooming">off</button>
        User:
        <button id="enable-user-zooming">on</button>
        <button id="disable-user-zooming">off</button><br />

        Autolock:
        <button id="enable-autolock">on</button>
        <button id="disable-autolock">off</button><br />

        Autoungrabify:
        <button id="enable-autoungrabify">on</button>
        <button id="disable-autoungrabify">off</button><br />

        Autounselectify:
        <button id="enable-autounselectify">on</button>
        <button id="disable-autounselectify">off</button><br />

        Selected BB:
        <button id="show-bb">ele</button>
        <button id="show-bb-body">body</button>
        <button id="show-bb-lbl">label</button>
        <button id="show-bb-lbl-main">main label</button>
        <button id="show-bb-lbl-src">source label</button>
        <button id="show-bb-lbl-tgt">target label</button>
        <button id="hide-bb">hide</button><br />

        Debug overlays:
        <button id="show-debug">show</button>
        <button id="hide-debug">hide</button><br />

        Mounting:
        <button id="mount">mount</button>
        <button id="unmount">unmount</button><br />

        <h2>Layout</h2>
        <select id="layout-select">
          <option value="null">Null</option>
          <option value="grid">Grid</option>
          <option value="random">Random</option>
          <option value="circle">Circle</option>
          <option value="breadthfirst">Breadthfirst</option>
          <option value="concentric">Concentric</option>
          <option value="cose">CoSE</option>
        </select>
        <button id="layout-button">Apply</button>
        <small>Time taken: <span id="layout-time">&nbsp;</span></small> <br />

        <h2>Filtering</h2>
        <label for="filter-selector">Selector</label> <input type="text" id="filter-selector" />
        <button id="filter-button">Select matches</button>


        <h2>Add &amp; remove elements</h2>
        <label for="nodes-number">Nodes</label> <input type="text" id="nodes-number" />
        <label for="edges-number">Edges</label> <input type="text" id="edges-number" />
        <button id="add-elements-button">Add</button>
        <button id="remove-selected-button">Remove selected</button> <br />
        <small>Time taken: <span id="add-remove-time">&nbsp;</span></small> <br /><br />
        <button id="load-compound">Load compound graph</button>

        <h2>Element events</h2>
        <select id="bind-type-select">
          <option value="bind">.bind()</option>
          <option value="one">.one()</option>
          <option value="once">.once()</option>
          <option value="unbind">.unbind()</option>
          <option value="on">.on()</option>
          <option value="off">.off()</option>
        </select>
        to
        <label for="bind-selector">Selector</label> <input type="text" id="bind-selector" />
        for<br />
        <select id="bind-event-select">
          <option value="click">click</option>
          <option value="mousedown">mousedown</option>
          <option value="mouseup">mouseup</option>
          <option value="mouseover">mouseover</option>
          <option value="mouseout">mouseout</option>
          <option value="mousemove">mousemove</option>
          <option value="touchstart">touchstart</option>
          <option value="touchmove">touchmove</option>
          <option value="touchend">touchend</option>
          <option value="tap">tap</option>
          <option value="tapstart">tapstart</option>
          <option value="tapend">tapend</option>
          <option value="tapdragover">tapdragover</option>
          <option value="tapdragout">tapdragout</option>
          <option value="tapdrag">tapdrag</option>
          <option value="taphold">taphold</option>
          <option value="onetap">onetap</option>
          <option value="dbltap">dbltap</option>
          <option value="cxttapstart">cxttapstart</option>
          <option value="cxttapend">cxttapstart</option>
          <option value="cxttapend">cxttapend</option>
          <option value="cxttap">cxttap</option>
          <option value="cxtdrag">cxtdrag</option>
          <option value="cxtdragover">cxtdragover</option>
          <option value="cxtdragout">cxtdragout</option>
          <option value="data">data</option>
          <option value="select">select</option>
          <option value="unselect">unselect</option>
          <option value="lock">lock</option>
          <option value="unlock">unlock</option>
          <option value="position">position</option>
          <option value="grabon">grabon</option>
          <option value="grab">grab</option>
          <option value="grabon">grabon</option>
          <option value="drag">drag</option>
          <option value="free">free</option>
          <option value="freeon">freeon</option>
          <option value="dragfree">dragfree</option>
          <option value="dragfreeon">dragfreeon</option>
          <option value="grabify">grabify</option>
          <option value="ungrabify">ungrabify</option>
          <option value="panify">panify</option>
          <option value="unpanify">unpanify</option>
          <option value="selectify">selectify</option>
          <option value="unselectify">unselectify</option>
          <option value="box">box</option>
          <option value="boxselect">boxselect</option>
          <option value="tapselect">tapselect</option>
          <option value="tapunselect">tapunselect</option>
          <option value="">null (unbind all)</option>
        </select>
        with delegate<br />
        <label for="bind-delegate">Selector</label> <input type="text" id="bind-delegate" />
        <button id="bind-button">Apply</button>

        <h2>Core events</h2>
        <select id="core-bind-type-select">
          <option value="bind">.bind()</option>
          <option value="one">.one()</option>
          <option value="unbind">.unbind()</option>
          <option value="on">.on()</option>
          <option value="off">.off()</option>
        </select>
        to
        core
        for<br />
        <select id="core-bind-event-select">
          <option value="click">click</option>
          <option value="mousedown">mousedown</option>
          <option value="mouseup">mouseup</option>
          <option value="mouseover">mouseover</option>
          <option value="mouseout">mouseout</option>
          <option value="mousemove">mousemove</option>
          <option value="touchstart">touchstart</option>
          <option value="touchmove">touchmove</option>
          <option value="touchend">touchend</option>
          <option value="tap">tap</option>
          <option value="tapstart">tapstart</option>
          <option value="tapend">tapend</option>
          <option value="tapdragover">tapdragover</option>
          <option value="tapdragout">tapdragout</option>
          <option value="tapdrag">tapdrag</option>
          <option value="taphold">taphold</option>
          <option value="onetap">onetap</option>
          <option value="dbltap">dbltap</option>
          <option value="cxttapstart">cxttapstart</option>
          <option value="cxttapend">cxttapstart</option>
          <option value="cxttapend">cxttapend</option>
          <option value="cxttap">cxttap</option>
          <option value="cxtdrag">cxtdrag</option>
          <option value="cxtdragover">cxtdragover</option>
          <option value="cxtdragout">cxtdragout</option>
          <option value="data">data</option>
          <option value="select">select</option>
          <option value="unselect">unselect</option>
          <option value="lock">lock</option>
          <option value="unlock">unlock</option>
          <option value="position">position</option>
          <option value="grabon">grabon</option>
          <option value="grab">grab</option>
          <option value="grabon">grabon</option>
          <option value="drag">drag</option>
          <option value="free">free</option>
          <option value="freeon">freeon</option>
          <option value="dragfree">dragfree</option>
          <option value="dragfreeon">dragfreeon</option>
          <option value="grabify">grabify</option>
          <option value="ungrabify">ungrabify</option>
          <option value="panify">panify</option>
          <option value="unpanify">unpanify</option>
          <option value="selectify">selectify</option>
          <option value="unselectify">unselectify</option>
          <option value="box">box</option>
          <option value="boxselect">boxselect</option>
          <option value="tapselect">tapselect</option>
          <option value="tapunselect">tapunselect</option>
          <option value="layoutstart">layoutstart</option>
          <option value="layoutready">layoutready</option>
          <option value="layoutstop">layoutstop</option>
          <option value="pan">pan</option>
          <option value="dragpan">dragpan</option>
          <option value="zoom">zoom</option>
          <option value="pinchzoom">pinchzoom</option>
          <option value="scrollzoom">scrollzoom</option>
          <option value="boxstart">boxstart</option>
          <option value="boxend">boxend</option>
          <option value="box">box</option>
          <option value="boxselect">boxselect</option>
          <option value="tapselect">tapselect</option>
          <option value="tapunselect">tapunselect</option>
          <option value="">null (unbind all)</option>
        </select>
        with delegate<br />
        <label for="core-bind-delegate">Selector</label> <input type="text" id="core-bind-delegate" />
        <button id="core-bind-button">Apply</button>

        <h2>Toggles on selected</h2>
        <button class="toggler">selectify</button> <button class="toggler">unselectify</button><br />
        <button class="toggler">lock</button> <button class="toggler">unlock</button><br />
        <button class="toggler">grabify</button> <button class="toggler">ungrabify</button><br />
        <button class="toggler">panify</button> <button class="toggler">unpanify</button>

        <h2>String stylesheets</h2>
        <label for="string-stylesheet"></label> <textarea id="string-stylesheet"></textarea>
        <button id="string-stylesheet-apply-button">Apply stylesheet</button>
      </div>

      <div id="note">
        <div id="note-name"></div>
        <div id="note-descr"></div>
      </div>

      <script src="compound.js"></script>
      <script src="notify.js"></script>
      <script src="init.js"></script>
      <script src="bind.js"></script>
      <script src="filter.js"></script>
      <script src="layout.js"></script>
      <script src="tests.js"></script>
      <script src="toggles.js"></script>
      <script src="view.js"></script>
      <script src="style.js"></script>
      <script src="add-remove.js"></script>
  </body>

</html>
